<template>
    <div class="address">
        <van-nav-bar title="收货地址" left-arrow @click-left="$router.go(-1)" />

        <!-- 收货地址列表 -->
        <div class="address-list">
            <!-- <div class="address-item" v-for="item in addressList" :key="item"> -->
            <div class="address-item">
                <div class="address-info">
                    <span>小龙 13445556567</span>
                    <span>北京 北京市 东城区 东城区小区1-504</span>
                    <van-divider />
                </div>
                <div class="icon">
                    <div class="check-icon">
                        <van-checkbox icon-size="18" >默认</van-checkbox>
                    </div>
                    <div class="edit-icon">
                        <van-icon name="records-o" />编辑
                        <van-icon name="delete-o" />删除
                    </div>
                </div>
            </div>
            <div class="address-item">
                <div class="address-info">
                    <span>小龙 13445556567</span>
                    <span>北京 北京市 东城区 东城区小区1-504</span>
                    <van-divider />
                </div>
                <div class="icon">
                    <div class="check-icon">
                        <van-checkbox icon-size="18" >默认</van-checkbox>
                    </div>
                    <div class="edit-icon">
                        <van-icon name="records-o" />编辑
                        <van-icon name="delete-o" />删除
                    </div>
                </div>
            </div>
            <!-- <van-address-list
                v-model="chosenAddressId"
                :list="list"
                default-tag-text="默认"
                @add="onAdd"
                @edit="onEdit"
            /> -->
        </div>

        <div class="footer-fixed">
            <div class="btn" @click="$router.push('/addAddress')">
                <span>添加新地址</span>
            </div>
        </div>

    </div>
</template>

<script>
export default {
    name: 'AddressList',
    data () {
        return {
            addressList: []
            // chosenAddressId: '1',
            // list: [
            //     {
            //     id: '1',
            //     name: '张三',
            //     tel: '13000000000',
            //     address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
            //     isDefault: true
            //     },
            //     {
            //     id: '2',
            //     name: '李四',
            //     tel: '1310000000',
            //     address: '浙江省杭州市拱墅区莫干山路 50 号'
            //     }
            // ]
        }
    },
    methods: {
        // onAdd () {
        //     this.$toast('新增地址')
        // },
        // onEdit (item, index) {
        //     this.$toast('编辑地址:' + index)
        // }
    }
}
</script>

<style lang="less" scoped>
.address {
    background-color: #f6f6f6;
    .address-item {
        width: 94%;
        height: 112px;
        margin: 9px auto;
        padding: 14px 19px;
        box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
        display: block;
        // justify-content: space-between;
        background-color: #ffffff;
        color: #303133;
        border-radius: 10px;
        font-size: 13px;
        .address-info {
            // font-size: 14px;
            height: 66px;
            display: flex;
            flex-direction: column;
            span:first-child {
                margin-bottom: 7px;
                font-size: 14px;
            }
        }
        .icon {
            display: flex;
            justify-content: space-between;
        }
    }
    .footer-fixed {
        position: fixed;
        bottom: 0px;
        height: 67px;
        width: 100%;
        // background-color: #f3eeee;
        padding: 0 5px;
        .btn {
                display: flex;
                justify-content: center;
                align-items: center;
            span {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 45px;
                width: 90%;
                padding: 0 21px;
                line-height: 28px;
                color: #ffffff;
                background-color: #f91313;
                border: 0.5px solid #f91313;
                font-size: 15px;
                // padding: 0 15px;
                // text-align: center;
                border-radius: 25px;
                margin: 10px 0;
            }
        }
    }
}
</style>